<template>
    <div class="dashboard-container">
        <my-search :fields="fieldsList" :baseNumber="8" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false">

        </my-search>

        <div class="table-list">
            <div style="padding:7px;" class="kplist">
                <span>开票数量：{{ kpsl }}</span> <span>开票金额：{{ kpje }}</span>
            </div>
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 240" max-height="660px" :current="true" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row />
        </div>
    </div>
</template>

<script>
import { queryList, queryFpmxfxHzsj } from '@/api/cxtj/qyfpmxfx'
import {
    queryDetailList
} from '@/api/cxtj/zdsygl'
export default {
    name: 'qyfpmx',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'qymc',
                    type: 'autocomplete',
                    value: '',
                    options: []
                },
                {
                    label: '纳税人识别号',
                    field: 'nsrsbh',
                    type: 'text',
                    value: ''
                },
                {
                    label: '进销项类型',
                    field: 'jxlx',
                    type: 'select',

                    options: [
                        {
                            label: '进项',
                            value: '1'
                        },
                        {
                            label: '销项',
                            value: '2'
                        },
                    ],
                    value: ''
                },
                {
                    label: '发票类型',
                    field: 'fplx',
                    type: 'select',
                    options: [
                        {
                            label: '增值税普票',
                            value: '1'
                        },
                        {
                            label: '增值税专票',
                            value: '2'
                        },
                        {
                            label: '电子普票',
                            value: '3'
                        },
                        {
                            label: '电子专票',
                            value: '4'
                        },
                        //  {
                        //     label:'卷式发票',
                        //     value:'5'
                        // },
                        //  {
                        //     label:'机动车发票',
                        //     value:'6'
                        // },
                        // {
                        //     label:'二手车发票',
                        //     value:'7'
                        // },
                        // {
                        //     label:'通行费发票',
                        //     value:'8'
                        // },
                    ],
                    value: ''
                },
                {
                    label: '货物名称',
                    field: 'hwhlwmc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '开票日期',
                    field: 'date',
                    type: 'daterange', // daterange
                    value: [],
                    options: [
                        {
                            field: 'kssj',
                            value: ''
                        },
                        {
                            field: 'jssj',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                },
                {
                    label: '备注',
                    field: 'bz',
                    type: 'text',
                    value: ''
                },
                {
                    label: '金额范围',
                    field: 'jefw',
                    type: 'numberSection', // numberSection

                    options: [
                        {
                            field: 'ksje',
                            value: ''
                        },
                        {
                            field: 'jsje',
                            value: ''
                        }
                    ],
                },
            ],
            //右侧表格开始
            // 金额、税率、税额、开票日期、备注
            tableColumns: [
                {
                    label: '纳税人名称',
                    prop: 'nsrmc',
                    align: 'center',
                    minWidth: 275,

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',
                    minWidth: 180,
                },
                {
                    label: '发票类型',
                    prop: 'yfplxdm',
                    align: 'center',
                    minWidth: 120,
                },
                {
                    label: '进销项类型',
                    prop: 'jxlx',
                    align: 'center',
                    minWidth: 120,
                },
                {
                    label: '购/销方名称',
                    prop: 'gxfmc',
                    align: 'center',
                    minWidth: 275,
                },
                {
                    label: '购/销方识别号',
                    prop: 'gxfsbh',
                    align: 'center',
                    minWidth: 180,
                },
                {
                    label: '发票代码',
                    prop: 'fpdm',
                    align: 'center',
                    minWidth: 180,
                },
                {
                    label: '发票号码',
                    prop: 'fphm',
                    align: 'center',
                    minWidth: 180,
                },
                {
                    label: '货物名称',
                    prop: 'hwhlwmc',
                    align: 'center',
                    minWidth: 180,
                },
                {
                    label: '金额',
                    prop: 'je',
                    align: 'center',
                    minWidth: 120,
                },
                {
                    label: '税率',
                    prop: 'slv',
                    align: 'center',

                },
                {
                    label: '税额',
                    prop: 'se',
                    align: 'center',
                    minWidth: 120,
                }
                ,
                {
                    label: '开票日期',
                    prop: 'kprq',
                    align: 'center',
                    minWidth: 120,
                },
                {
                    label: '备注',
                    prop: 'bz',
                    align: 'center',
                    minWidth: 120,
                    // render: (h, params) => {
                    // }
                }



            ],
            tableDatas: [

            ]
            , queryObj: {
                qymc: '', //公司名称
                nsrsbh: '',
                fplx: '',
                hwhlwmc: '',
                bz: '',
                jxlx: '1',
                kssj: '',
                jssj: '',
                ksje: '',
                jsje: '',
                pageNo: 1,
                pageSize: 20
            },
            total: 0,

            kpsl: '',
            kpje: ''
        }
    },
    watch: {

        fieldsList: {
            handler(newOption, oldOption) {
                this.searchTxt = newOption[0].value
            },
            deep: true
        },
        searchTxt(newOption, oldOption) {
            console.log('1', newOption, oldOption)
            this.getQueryDetailList(newOption)
        }
    },
    mounted() {
    },
    methods: {
        getQueryDetailList(nsrmc) {
            queryDetailList({ nsrmc: nsrmc }).then(res => {
                if (res.code == 200) {
                    this.fieldsList[0].options = res.data.records.map(item => {
                        return { value: item.NSRMC, label: item.NSRMC }
                    })
                }
                console.log(this.fieldsList[0].options)
            })
        },
        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.qymc = params.qymc || '';
            this.queryObj.nsrsbh = params.nsrsbh || '';
            this.queryObj.fplx = params.fplx || '';
            this.queryObj.hwhlwmc = params.hwhlwmc || '';
            this.queryObj.bz = params.bz || '';
            this.queryObj.kssj = params.kssj || '';
            this.queryObj.jssj = params.jssj || '';
            this.queryObj.jxlx = params.jxlx || '';
            this.queryObj.ksje = params.ksje || '';
            this.queryObj.jsje = params.jsje || '';
            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.queryObj.jxlx = 1
            this.fieldsList[2].value = "1"
            this.total = 0
            this.tableDatas = []
        },
        getTableData() {

            if (this.queryObj.qymc == '') {
                this.$message.error('企业名称不能为空')
                return false
            }
            this.loading = true
            let params = {
                qymc: this.queryObj.qymc,
                nsrsbh: this.queryObj.nsrsbh,
                fplx: this.queryObj.fplx,
                hwhlwmc: this.queryObj.hwhlwmc,
                bz: this.queryObj.bz,
                kssj: this.queryObj.kssj,
                jssj: this.queryObj.jssj,
                jxlx: this.queryObj.jxlx,
                ksje: this.queryObj.ksje,
                jsje: this.queryObj.jsje,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            queryList(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.total = res.data.total
                    this.tableDatas = res.data.records
                }


            })

            queryFpmxfxHzsj(params).then(res => {
                console.log(res)
                this.kpsl = res.data.fpslhj
                this.kpje = res.data.kphj
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .kplist {
        text-align: right;

        span {
            font-size: 14px;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.56);
        }
    }
}
::v-deep .el-date-editor {
    width: 212px;
}
</style>
